import './style/gerenshezhi.css';
import React from 'react';
import Navbar from '../component/Navbar';
import { Modal } from 'antd-mobile';

class GeRenSheZhi extends React.Component {

    state = {
        modal2: false
    }
    //跳转
    changePassword(index) {
        // eslint-disable-next-line default-case
        switch (index) {
            case 1:
                this.props.history.push({ pathname: '/xiugaidenglumima', query: { type: index } })
                break;
            case 2:
                this.props.history.push({ pathname: '/xiugaidenglumima', query: { type: index } })
                break;
            case 3:
                this.props.history.push({ pathname: '/bindWechat' })
                break;
        }

    }
    goBack = () => {
        this.props.history.goBack();
    }
    render() {
        return (
            <div className='gerenshezhi'>
                <Navbar onClick={this.goBack} title='个人设置'></Navbar>
                <div className='scroll'>
                    <div className='main'>
                        <div className='item'>
                            <span className='left'>头像</span>
                            <div onClick={() => {
                                this.setState({
                                    modal2: true
                                })
                            }} style={{ display: 'flex', alignItems: 'center' }}>
                                <img alt='' className='touxiang' src={require('./img/wode/touxiang.png')}></img>
                                <img alt='' src={require('./img/wode/left.png')} ></img>
                            </div>
                        </div>
                        <div className='item'>
                            <span className='left'>认证手机号</span>
                            <span className='sjh'>18672345668</span>
                        </div>
                        <div className='item' onClick={() => this.changePassword(1)}>
                            <span className='left'>修改登录密码</span>
                            <img alt='' src={require('./img/wode/left.png')} ></img>
                        </div>
                        <div className='item' onClick={() => this.changePassword(2)}>
                            <span className='left'>修改提现密码</span>
                            <img alt='' src={require('./img/wode/left.png')} ></img>
                        </div>
                        <div className='item' onClick={() => this.changePassword(3)}>
                            <span className='left'>绑定微信号</span>
                            <img alt='' src={require('./img/wode/left.png')} ></img>
                        </div>
                    </div>
                </div>
                <Modal
                    popup
                    visible={this.state.modal2}
                    animationType="slide-up"
                >
                    <div className='gerenshezhi-modal'>
                        <span>拍照</span>
                        <span>从手机相册选择</span>
                        <span onClick={() => {
                            this.setState({
                                modal2: false
                            })
                        }}>取消</span>
                    </div>
                </Modal>
            </div>
        )
    }
}

export default GeRenSheZhi;